import React from 'react';
import { injectIntl } from 'react-intl';
import { Row, Col, Input , Form} from 'antd';
import { withRouter } from 'react-router-dom';
import Grid from '../../components/table/grid';
const FormItem = Form.Item;
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
    <EditableContext.Provider value={form}>
      <tr {...props} />
    </EditableContext.Provider>
  );
const EditableFormRow = Form.create()(EditableRow);


class EditableCell extends React.Component {
    getInput = () => {
      if (this.props.inputType === 'number') {
        return <InputNumber />;
      }
      return <Input />;
    };
  
    render() {
      const {
        editing,
        dataIndex,
        title,
        inputType,
        record,
        index,
        ...restProps
      } = this.props;
      return (
        <EditableContext.Consumer>
          {(form) => {
            const { getFieldDecorator } = form;
            return (
              <td {...restProps}>
                {editing ? (
                  <FormItem style={{ margin: 0 }}>
                    {getFieldDecorator(dataIndex, {
                      rules: [{
                        required: true,
                        message: `Please Input ${title}!`,
                      }],
                      initialValue: record[dataIndex],
                    })(this.getInput())}
                  </FormItem>
                ) : restProps.children}
              </td>
            );
          }}
        </EditableContext.Consumer>
      );
    }
  }


@withRouter
class chargePermit extends React.Component{
    constructor(props){
        super(props);
        this.state={
            refresh:0,
            params:{
                stubId:this.props.location.state
            }
        };
        this.columns=[
            {
                title: '项目',
                dataIndex: 'name',
                key: 'name',
                align:'left'
            },
            {
                title: '设备端名单',
                dataIndex: 'equipName',
                key: 'equipName',
                align:'left',
                render:(text)=>(
                this.state.keyWord?this.funSearch(text):<span className={'searchNames'}>{text}</span>
                )
            },
            {
                title: '平台名单',
                dataIndex: 'platformName',
                key: 'platformName',
                align:'left',
                render:(text)=>(
                    this.state.keyWord?this.funSearch(text):<span className={'searchNames'}>{text}</span>
                )
            }
        ]
    }

    transformData=(data)=>{
        return [{id:1,name:'最后变更时间',equipName:data.stubConfigModifyTime,platformName:data.platformConfigModifyTime},
        {id:2,name:'vin',equipName:data.stubVin||`123123323,asdasd,asdasdasd,asdasdasd,asdasdasd,asdasdsa,fdgdfgfdg,dfgfdgdfg,dfgdfgdfg,dfgdfgdfg,dfgdfgdgf,dfgdfgdfg,`,platformName:data.platformVin||`1as..,asdasd,sadasdasd,asdasdasd,asdasddddd,sdsddsdsd,sdsdsxcxc,serere,erertghth,fg`},
        {id:3,name:'电卡',equipName:data.stubCard,platformName:data.platformCard}]
    }
    funSearch=(text)=>{
        console.log(text);
        var re =new RegExp(this.state.keyWord,"g");
        text=text.replace(re, `<span class="keyWord">${this.state.keyWord}</span>`);
        return <span className={'searchNames'} dangerouslySetInnerHTML={{__html:text}}></span>;
    }

    search=()=>{
        console.log(this.state.keyWord);
    }

    render(){
        if(!this.props.location.state){
            this.props.history.go(-1);
            return null;
        }
        return(
            <div>
                <Row gutter={8}>
                    <Col xl={5}>
                        <Input onChange={(e)=>{this.setState({
                            keyWord:e.target.value
                        })}}/>
                    </Col>
                </Row>
                <Grid style={{marginTop:10}} transformData={this.transformData} refresh={this.state.refresh} params={this.state.params}
                      columns={this.columns} url="/api/stub/config/detail"/>
            </div>
        )
    }
}

export default injectIntl(chargePermit)

